<template>
  <div class="login">
    <!--  :rules="[{ required: true, message: '请填写用户名' }]"  -->
    <!-- <h3>登录</h3> -->
    <van-form @submit="onSubmit">
      <van-field v-model="username" name="uname" label="用户名" placeholder="请输入账号" />

      <van-field v-model="password" type="password" name="upass" label="密码" placeholder="请输入密码" />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>

      <div>
        <router-link class="link" to="/register">还没账号，立即注册?</router-link>
      </div>

      <div class="message">
        <van-checkbox v-model="checked" icon-size="12px"></van-checkbox>
        我已阅读并同意xxxx的
        <a href="#">《服务协议》</a>
        <a href="#">《绮梦文渊用户协议》</a>
        <a href="#">《个人信息保护政策》</a>
      </div>
    </van-form>

    <back-to> </back-to>
  </div>
</template>

<script>
// 导入组件
import { Toast, Dialog } from 'vant'
// 初始化（获取存储在本地的所有用户信息）
let qi_user = []
let qi_users_str = localStorage.getItem("qi_USERS")
if (qi_users_str) {
  // 如果本地有存储用户信息，就把这个存储信息的字符串转成数组
  qi_user = JSON.parse(qi_users_str)
}

import BackTo from '@/components/BackTo.vue'


export default {
  data() {
    return {
      username: '',
      password: '',
      checked: true,
      
    };
  },
  components:{
    BackTo
  },
  methods: {
    onSubmit(values) {
      // console.log('submit', values);
      // 判断用户是否阅读平台协议
      if (!this.checked) {
        Toast('请阅读并同意协议和政策');
        return false;
      }

      // 解构赋值
      let { uname, upass } = values
      // 判断输入框是否为空
      if (uname == "" || upass == "") {
        // 弹窗提示
        // Toast.fail('输入框不能为空');
        Toast('请输入账号和密码')
        return false;
      }

      // 匹配账号和密码
      let arr = qi_user.filter(item => {
        return item.username == uname && item.password == upass
      })

      // console.log(arr);
      // 根据arr数组长度判断用户是否登录成功
      if (arr.length == 1) {
        // 把用户ID作为token
        let id = arr[0].id;
        localStorage.setItem("AUTO_TOKEN",id);

        // 给用户反馈“注册结果”
        Dialog.alert({
          confirmButtonColor: '#ffc0cb',
          message: '登录成功。',
        }).then(() => {
          // on close
          // 跳转登录页
          this.$router.push({ path: '/my' })
        });
      }
      else {
        let arr2 = qi_user.filter(item => item.username == uname)
        if (arr2.length == 0) {
          Toast('该账号不存在')
        }
        else {
          Toast('账号或者密码错误')
        }
      }
    },
  },


};
</script>

<style lang="less">
@import '../common/less/varible.less';

.login {
  padding-top: 150px;

  .van-button--normal {
    background-color: @bgColor;
    border: 0;
  }

  .link {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    // text-decoration: underline;

  }

  .message {
    padding: 0 15px;
    box-sizing: border-box;
    margin-top: 20px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    text-align: center;
    color: #666;
    line-height: 175%;

    a {
      color: #0c8bf3;
    }

    .van-checkbox {
      display: inline-block !important;
    }
  }

}
</style>

